<template>
  <t-layout class="main">
    <t-head-menu v-model="currentPath" theme="dark" @change="routerPush">
      <template #logo>
        <div class="logo">
          <img src="@/assets/image/logo.png" alt="" />
          <span>社牛Desk</span>
        </div>
      </template>
      <t-menu-item v-for="item in menuList" :key="item.path" :value="item.path">
        {{ item.name }}
      </t-menu-item>
      <template #operations>
        <div class="operation">
          <t-button variant="text" v-if="enableFullscreen" @click="changeFullscreen">
            <template #icon>
              <Fullscreen2Icon size="20px" v-if="!fullscreen" />
              <FullscreenExit1Icon size="20px" v-else />
            </template>
          </t-button>
          <t-button variant="text" @click="loginStore.logoutAction()">
            <template #icon><t-icon name="poweroff" /></template>
          </t-button>
        </div>
      </template>
    </t-head-menu>
    <t-layout>
      <t-layout>
        <t-content>
          <t-card
            :bordered="false"
            style="max-height: calc(100vh - 145px); overflow-y: auto; margin: 15px 15px 0 15px"
          >
            <router-view v-slot="{ Component }">
              <Transition
                enter-active-class="animate__animated animate__faster animate__fadeInDown"
              >
                <keep-alive>
                  <component :is="Component"></component>
                </keep-alive>
              </Transition>
            </router-view>
          </t-card>
        </t-content>
        <t-footer style="text-align: center">
          Copyright @ 2022-{{ new Date().getFullYear() }} SheniuDesk. All Rights Reserved
        </t-footer>
      </t-layout>
    </t-layout>
  </t-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
import { myLocalStorage } from '@/utils/storage'
import { useRoute } from 'vue-router'
import useLoginStore from '@/stores/login/login'
import useFullScreen from '@/hooks/useFullScreen'
import { Fullscreen2Icon, FullscreenExit1Icon } from 'tdesign-icons-vue-next'

const route = useRoute()
const loginStore = useLoginStore()
const { enableFullscreen, fullscreen, changeFullscreen } = useFullScreen()
const currentPath = ref(route.path)

const routerPush = (path: string) => {
  console.log(path)

  router.push(path)
  currentPath.value = path
  myLocalStorage.setStorage('activePath', path)
}

const menuList = [
  {
    name: '用户',
    path: '/main/user'
  },
  {
    name: '部门',
    path: '/main/dept'
  },
  {
    name: '设备',
    path: '/main/client'
  }
]
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: #fff;

  img {
    margin-right: 6px;
  }
  span {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
  }
}

.operation {
  .t-button {
    color: #fff;
    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}
</style>
